<template>
  <div id="app">
    <!-- 使用 data 中的变量  -->
    <h1>{{ dogname }}</h1>
    <img alt="Vue logo" src="./assets/logo2.jpg" /><br />
    <!-- 1.属性绑定：静态 ， 动态 -->
    <a href="http://www.baidu.com">静态属性-去天堂</a><br />
    <a v-bind:href="heavenUrl">动态属性-去天堂</a><br />
    <a :href="heavenUrl">动态属性-去天堂</a><br />
    <!-- 2.事件绑定：-->
    <button onclick="">dom 的 点击事件：去地狱</button><br />
    <button v-on:click="sayHi">vue 的 点击事件：去地狱</button><br />
    <button @click="sayHi2(123, $event)">vue 的 点击事件：去地狱</button><br />
    <!-- 3.事件修饰符 -->
    <!-- 通用修饰符： .prevent  .stop -->
    <!-- 按键修饰符：.enter  .65    .自定义按键 -->
  </div>
</template>

<script>
export default {
  name: "App",
  // 组件数组
  data() {
    return {
      dogname: "ruiky",
      heavenUrl: "http://www.baidu.com",
    };
  },
  // 组件方法
  methods: {
    sayHi(e) {
      console.log(e);
      console.log("hi~~");
    },
    sayHi2(age, e) {
      console.log("hi2~~");
    },
  },
  created() {
    console.log(this);
  },
};
</script>

<style>
</style>
